<!--后厨物资管理-设备管理-添加/编辑桌面秤设备/模态框-->
<template>
  <div>
    <cus-modal ref="modal" :title="flag ? '修改密码' : peopleForm.id ? '编辑' : '添加'" width="380" @on-visible-change="onVisibleChange"
      @onOk="onOk">
      <Form ref="formValidate"  :model="peopleForm"  :rules="ruleValidate" :label-width="100">
        <FormItem label="账号:" v-if="!flag"  prop="account">
          <Input v-trim :disabled="!!peopleForm.id" v-model="peopleForm.account" maxlength="20" style="width: 200px" placeholder="请输入账号"></Input>
        </FormItem>
        <FormItem label="用户名称:"  v-if="!flag" prop="name">
          <Input v-trim :disabled="!!peopleForm.id" v-model="peopleForm.name" maxlength="20" style="width: 200px" placeholder="请输入用户名称"></Input>
        </FormItem>
        <FormItem label="登录密码:" prop="password" v-if="flag || !peopleForm.id">
          <Input v-trim v-model="peopleForm.password" maxlength="20" style="width: 200px" placeholder="请输入登录密码"></Input>
        </FormItem>
        <FormItem label="手机号:"  v-if="!flag" prop="phone" >
          <Input v-trim v-model="peopleForm.phone" maxlength="20" style="width: 200px" placeholder="请输入手机号"></Input>
        </FormItem>
        <formItem label="人脸图片:" v-if="!flag"  prop="imageList"  :rules="{ required: true, type: 'array', message: '图片不能为空', trigger: 'blur' }">
          <cus-uploadIMG :value.sync="peopleForm.imageList" :syncDelete="false" :fnc="postApiImageUpload"></cus-uploadIMG>
        </formItem>
      </Form>
      <Spin size="large" fix v-if="loading"></Spin>
    </cus-modal>
  </div>
</template>
  
<script>
import { postApisaveOperatorInfo, postApiImageUpload } from "@/api/business/manager";
const peopleForm = {
  id: "",
        name: "", // 账号
        imageList: [], //图片地址
        phone: '', //手机号
        createTime: '', //创建时间
        updateTime: '', //更新时间
        status: '', //状态
        account: '', //物资称账号
        password: '', //登录密码
        createBy: '', //创建人id
        updateBy: '', //更新人id
        fromSource: '', //来源   用户注册来自 1 物资  2 电子秤
        userId: '', //用户id
}
export default {
  components: {},
  name: "",
  data() {
    return {
      // 判断是修改密码框还是编辑框 真为修改密码，否为编辑
      flag: false,
      loading: false,
      peopleForm:peopleForm,
      ruleValidate: {
        account: [
        { required: true, message: '账号不能为空', trigger: 'blur' },
        {
          min: 5,
          max: 12,
          message: '账号长度在5到12之间',
          trigger: 'blur',
        },
        { pattern: /^[a-zA-Z]([-_a-zA-Z0-9])+$/,message: '账号由字母开头', trigger: 'blur' },
        { pattern: /^[a-zA-Z]([-_a-zA-Z0-9])+$/,message: '账号由字母、数字、下划线组成', trigger: 'blur' },
       
        ],
        name: [
        { required: true, message: '用户名称不能为空', trigger: 'blur' },
        { pattern:  /^[\u4E00-\u9FA5A-Za-z0-9]+$/,message: '姓名由中文或英文或数字组成', trigger: 'blur' },
        ],
        password: [
        {
          required: true,
          message: '登录密码不能为空',
          trigger: 'blur',
        },
        {
          min: 6,
          message: '密码长度不能小于6',
          trigger: 'blur',
        },
        {
          pattern:  /^[0-9a-zA-Z\d`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、;]+$/,message: '密码由数字英文特殊字符组成',
          trigger: 'blur',
        },      
        ]
       
      },
      postApiImageUpload: postApiImageUpload
    };
  },
  mounted() {
  },
  methods: {
    onVisibleChange(v) {
      this.$refs["formValidate"].resetFields();
      if(!v) {
        this.peopleForm = this.$cu.deepClone(peopleForm)
      }
   console.log(this.peopleForm);
    },
    show(row,flag) {
      console.log(flag);
      this.loading = false;
      this.flag = flag ? flag  : false
      this.$refs["modal"].show = true;
      if(row) {
        row.imageList = row.photoAddress ? [{
                path: row.photoAddress,
                status: 'success'
              }] : []
        this.peopleForm = this.$cu.deepClone(row) 
      }    
    },
    onOk() {
      this.$refs["formValidate"].validate((valid) => {
        console.log(valid,this.peopleForm);
        if (valid) {
          console.log(new Date().getTime() );
          this.postApisaveOperatorInfoApi();
          this.peopleForm.photoAddress = this.peopleForm.imageList[0].path
          this.peopleForm.fromSource = this.peopleForm.fromSource ? this.peopleForm.fromSource : 1
          this.peopleForm.createTime = this.peopleForm.createTime ? this.peopleForm.createTime : new Date().getTime()
          this.peopleForm.updateTime =  new Date().getTime()
          this.peopleForm.createBy = this.peopleForm.createBy ? this.peopleForm.createBy : this.$store.state.vuex_user.base.id
          this.peopleForm.updateBy =  this.$store.state.vuex_user.base.id
          this.peopleForm.status = 1
          console.log(12345);

        }
      });
    },
    //编辑人员数据
    postApisaveOperatorInfoApi() {
      return new Promise((resolve) => {
        postApisaveOperatorInfo(this.peopleForm).then((res) => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.$Message.success(res.retMsg)
            this.$refs["modal"].show = false;
            this.$parent.onInit();//刷新列表
          }else {
            this.$Message.console.error(res.retMsg)
          }
          resolve();
        });
      });
    }
  },
};
</script>
  
<style scoped lang="less">

.demo-upload-list {
  display: inline-block;
  width: 140px;
  height: 140px;
  text-align: center;
  line-height: 140px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  border: 1px dashed #dcdee2;
}

.dishUrlImg {
  width: 140px !important;
  height: 140px !important;
  border-radius: 4px;
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  color: #fff;
}
</style>
  